<template>
	<view class="page">

		<view class="split">
			<view class="split1">
				<view class="title1">
					<label class="title-item3">全部类别</label>
				</view>
				<view class="title" v-for=" item in tabHistoryList ">
					<label v-if="item==value" class="title-item2-click" @click="clickInput(item)">{{item}}</label>
					<label v-else class="title-item2" @click="clickInput(item)">{{item}}</label>
				</view>
			</view>
			
			<view class="split2"></view>
			<view class="split1">
				<view class="title0">
					<label class="title-item1">子品类名</label>
				</view>
				
				<view class="title" v-for=" item in tabList ">
					<label v-if="item==valueItem" class="title-item2-click2" @click="clickInput2(item)">{{item}}</label>
					<label  v-else class="title-item2" @click="clickInput2(item)">{{item}}</label>
				</view>
			</view>
		</view>
		 
		 
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:0,
				tabHistoryList:[],
				tabList:[],
				value:"蔬菜类",
				valueItem:"西红柿"
				
			}
		},
		onLoad(options) {
			this.tab=options.tab;
			this.tabHistoryList=["蔬菜类","水果类","畜禽类","粮油类","干果类","调料类","水产类","副食类"]
			this.tabList=['西红柿','黄瓜','娃娃菜','大白菜','洋葱','白萝卜','茄子','山药','南北瓜','土豆','大蒜','冬瓜','姜','大葱','菌类','蒜薹','豆角','胡萝卜','生菜','芹菜','莴笋','菜花','椒类','红薯','西葫芦','菠菜','其他','特菜','甘蓝','藕' ]
		},
		methods: {
			clickInput(item){
				this.value = item;
				if(item =='蔬菜类'){
					this.tabList=['西红柿','黄瓜','娃娃菜','大白菜','洋葱','白萝卜','茄子','山药','南北瓜','土豆','大蒜','冬瓜','姜','大葱','菌类','蒜薹','豆角','胡萝卜','生菜','芹菜','莴笋','菜花','椒类','红薯','西葫芦','菠菜','其他','特菜','甘蓝','藕' ]
				}
				if(item =='水果类'){
					this.tabList=['精品水果',' 进口水果',' 苹果',' 梨',' 西瓜',' 香蕉',' 木瓜',' 芒果',' 葡萄',' 猕猴桃',' 哈密瓜',' 甜瓜类',' 其他类',' 桃李杏',' 荔枝',' 樱桃' ]
				}
				if(item =='畜禽类'){
					this.tabList=['猪肉','牛肉','羊肉','鸡','禽蛋','其他' ]
				}
				if(item =='粮油类'){
					this.tabList=['食用油','大米','面粉','小米','玉米类','豆类','杂粮类','其他' ]
				}
				if(item =='干果类'){
					this.tabList=[]
				}
				if(item =='调料类'){
					this.tabList=['酱油','醋','盐','味精','酱','花椒','大料','肉料','其他' ]
				}
				if(item =='水产类'){
					this.tabList=['鱼类','虾类','贝类','藻类','蟹类','鳖类','冷冻类','其他类']
				}
				if(item =='副食类'){
					this.tabList=['熟食类','豆制品','奶茶','酒水','饮料','糖果','茶叶','零食','糕点','速食类']
				}
				 
			},
			clickInput2(item){
				this.valueItem = item;
				this.goToPage()
			},
			goToPage() {
				 
				  // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
				  let pages = getCurrentPages() 
				  // 2. 上一页面实例
					// 注意是length长度，所以要想得到上一页面的实例需要 -2
					// 若要返回上上页面的实例就 -3，以此类推
				  let prevPage = pages[pages.length -2] 
				  // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				  prevPage.getValue(this.valueItem) 
			
				  uni.navigateBack();
			},
			doSearch(){
				//显示搜索结果
				this.goToPage()
			},
			handleInput({ detail }) {
				this.value = detail.value;
			}
		}
	}
</script>

<style>
	.split{
		display: flex;
		margin-top: 20px;
		
	}
	.split1{
		flex: 1;
		margin-left: 10px;
		margin-right: 10px;
		 
	}
	.split2{
		flex: 0.1;
		max-width: 1px;
		margin-top: 60px;
		border-right: 1px solid #eee;
	}
	.page{
		background-color: #fff;
		margin:0px 10px 0px 10px;
		
	}
	.bg999{
		background-color: #999999;
	}
	 .swiperTitle{
		height: 32px;
		line-height: 32px;
		display: flex; 
		top: 10px;
		right: 15px;
		left: 15px;

	 }
	 .swiperTitle-lable{
		color: rgba(255, 255, 255, 1);
		background-color: rgba(67, 207, 124, 1);;
		text-align: center;
		flex: 1.5;
		border-radius: 5px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		margin-top: 2px;
		z-index: 1;
	 }
	 
	 .swiperTitle-input {
		padding-left: 10px;
		height: 34px;
		line-height: 34px;
	 	border-radius: 5px;
		font-size: 15px;
	 	background: #eee;
		color:black;
		flex: 9.5;
		margin-right: -60px;
		 
	 }
	 .input-placeholder{
	 		font-size: 11px;
	 		font-weight: 400;
	 		letter-spacing: 0px;
	 		line-height: 16px;
	 
	 		text-align: left;
	 }
	 
	 .title0{
	 	display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom,#d3959b,#fff);
		border-radius: 4px;
		height: 40px;
		 
		 
	 	 
	 }
	 .title1{
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom,#bfe6ba,#fff);
		border-radius: 4px;
		height: 40px;
		 
	 	 
	 }
	 
	 .title{
	 	display: flex;
	 		 
	 	 
	 }
	 .title-item1{
		margin-left: 10px;
	 	margin-top: 15px;
	 	font-size: 15px !important;
	 	font-weight: 700;
	 	letter-spacing: 0px;
	 	line-height: 16px;
	 	color: rgba(212, 49, 49, 1);
	 	flex: 1;
	 	text-align: center;
	 	font-weight: bold;
	 }
	 .title-item3{
	 	margin-left: 10px;
	 	margin-top: 15px;
	 	font-size: 15px !important;
	 	font-weight: 700;
	 	letter-spacing: 0px;
	 	line-height: 16px;
	 	color: black;
	 	flex: 1;
	 	text-align: center;
	 	font-weight: bold;
	 }
	 .title-item2{
	 	flex: 1;
	 	text-align: center;
	 	margin-top: 15px;
		padding: 10px;
		background-color: #eee;
		border-radius: 5%;
		font-size: 15px;
		font-weight: bold;
	 }
	 .title-item2-click{
	 	flex: 1;
	 	text-align: center;
	 	margin-top: 15px;
		padding: 10px;
		background-color: #eee;
		border-radius: 5%;
		font-size: 15px;
		font-weight: bold;
		background-color: #bfe6ba;
	 }
	 
	 .title-item2-click2{
	 	flex: 1;
	 	text-align: center;
	 	margin-top: 15px;
		padding: 10px;
		border-radius: 5%;
		font-size: 15px;
		font-weight: bold;
		background-color: #d3959b;
	 }
</style>
